<template>
<div class = "article">
<br><br><br><br><br><br>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>{{resname}}</span>
  </div>
  <div v-for="o in 1" :key="o" class="text item">
    {{resdes}}
  </div>
</el-card>

<br><br><br><br>

<el-card class="box-card" body-style=margin:auto>
  <div slot="header" class="clearfix">
    <span>练习方法</span>
  </div>
  <div v-for="o in 1" :key="o" class="text item">
    {{resmethod}}
  </div>
</el-card>

</div>
</template>

<script>
import axios from 'axios'
axios.defaults.withCredentials = true
export default{
  name: 'Article',
  props: {
      resname: {
	  		type:String,
	  		default:''
		  },
      resdes:{
	  		type:String,
	  		default:''
		  },
      resmethod:{
	  		type:String,
	  		default:''
      }
  },

  data () {
    return {
    }
  },
  
  mounted () {
    let params = new URLSearchParams()
    params.append('muscleId', this.$route.query.imgid)
    let that = this
    axios({
      method: 'post',
      url: 'http://localhost:8080/muscle/getComment',
      data: params,
      withCredentials: true
    }).then((response) => {
      // 修改后方法
      //that.res = response.data.data.
      //console.log(that.res)
      // 原方法
      that.resname = response.data.muscle.name
      that.resdes = response.data.muscle.description
      that.resmethod = response.data.muscle.method
    })
  }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .article {
    left: 200px;
  }
  .box-card {
    margin-left: 20%;
    margin-right: 20%;
    left: 200px;
  }
</style>
